Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature(react-tree): introduces navigationMode property #33658

Conversation

bsunderhus
Copy link
Contributor

@bsunderhus bsunderhus commented Jan 15, 2025

Previous Behavior

New Behavior

  1. Introduces navigationMode property
    • tree (default) - navigation as expected by tree WAI ARIA spec (+ actions interactions)
    • treegrid - navigation similar to treegrid WAI ARIA spec. pressing right arrow either opens the treeitem if it's a branch or goes from the treeitem (row) to its actions (cell). pressing up arrow goes to previous item, and down arrow to next item
  2. adds a story to showcase the new navigation mode.

Problems related:

  1. tabbing navigation between treeitem and actions is still valid (might be worth investigating tabster support to invalidate this navigation)

Related Issue(s)

  • Fixes #

@bsunderhus bsunderhus self-assigned this Jan 15, 2025
Copy link

github-actions bot commented Jan 15, 2025

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.164 MB
291.433 kB
1.166 MB
291.998 kB
1.428 kB
565 B
react-tree
FlatTree
145.565 kB
41.884 kB
147.295 kB
42.271 kB
1.73 kB
387 B
react-tree
PersonaFlatTree
146.251 kB
41.984 kB
148.04 kB
42.417 kB
1.789 kB
433 B
react-tree
PersonaTree
142.475 kB
40.818 kB
144.249 kB
41.27 kB
1.774 kB
452 B
react-tree
Tree
141.787 kB
40.712 kB
143.51 kB
41.149 kB
1.723 kB
437 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.236 kB
20.182 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
222.641 kB
64.474 kB
react-components
react-components: FluentProvider & webLightTheme
44.473 kB
14.597 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-timepicker-compat
TimePicker
108.551 kB
36.094 kB
🤖 This report was generated against cc1756e0cb08f40d5c356166b0d9abe9beb80b5b

Copy link

Pull request demo site: URL

@bsunderhus bsunderhus force-pushed the react-tree/feature--navigationMode=treegrid branch from c767926 to af1d442 Compare January 15, 2025 14:49
@bsunderhus bsunderhus marked this pull request as ready for review January 17, 2025 12:42
@bsunderhus bsunderhus requested a review from a team as a code owner January 17, 2025 12:42
ling1726
ling1726 previously approved these changes Jan 17, 2025
@ling1726 ling1726 dismissed their stale review January 17, 2025 14:15

behaviour does't match spec

@bsunderhus bsunderhus requested a review from ling1726 January 17, 2025 16:42
@bsunderhus bsunderhus requested a review from ling1726 January 17, 2025 20:18
@bsunderhus bsunderhus merged commit 246f5b3 into microsoft:master Jan 21, 2025
16 checks passed
@bsunderhus bsunderhus deleted the react-tree/feature--navigationMode=treegrid branch January 21, 2025 13:59
marcosmoura added a commit that referenced this pull request Jan 23, 2025
…/chore--slot-API-react-v17/18-support

* chore/react-18-support: (516 commits)
  update some deps to React 18
  test(react-color-picker): Added cy and a11y tests for sliders (#33609)
  fix(react-charting): Centre align Gauge chart (#33710)
  fix(vr-tests): set a fixed value for culture prop in charts (#33690)
  release: applying package updates - react v8
  feat(react-charting): Heatmap text color based on Contrast Ratio (#33659)
  test(color-picker): Added VR tests for ColorSlider and AlphaSlider (#33672)
  fix: remove forced synchronous layout in Drawer (#33665)
  feat(declarative-chart): Support for Dashed and Dotted lines (#33694)
  release: applying package updates - react-components
  feat: add vite sandbox template (#33631)
  ci: trigger VRT PR workflow only against testing branch (#33701)
  chore(deps-dev): bump vite from 6.0.7 to 6.0.9 (#33698)
  release: applying package updates - react v8
  BaseFloatingPicker - Release references held by Async (#33685)
  feature(react-tag-picker): single line layout (#32247)
  feature(react-tree): introduces navigationMode property (#33658)
  bugfix: secondaryContent not displaying properly (#33689)
  release: applying package updates - react v8
  fix(react-charting): resolve overlapping bars issue in histogram (#33695)
  ...
marcosmoura added a commit that referenced this pull request Jan 23, 2025
…/chore--slot-API-react-v17/18-support

* chore/react-18-support: (516 commits)
  update some deps to React 18
  test(react-color-picker): Added cy and a11y tests for sliders (#33609)
  fix(react-charting): Centre align Gauge chart (#33710)
  fix(vr-tests): set a fixed value for culture prop in charts (#33690)
  release: applying package updates - react v8
  feat(react-charting): Heatmap text color based on Contrast Ratio (#33659)
  test(color-picker): Added VR tests for ColorSlider and AlphaSlider (#33672)
  fix: remove forced synchronous layout in Drawer (#33665)
  feat(declarative-chart): Support for Dashed and Dotted lines (#33694)
  release: applying package updates - react-components
  feat: add vite sandbox template (#33631)
  ci: trigger VRT PR workflow only against testing branch (#33701)
  chore(deps-dev): bump vite from 6.0.7 to 6.0.9 (#33698)
  release: applying package updates - react v8
  BaseFloatingPicker - Release references held by Async (#33685)
  feature(react-tag-picker): single line layout (#32247)
  feature(react-tree): introduces navigationMode property (#33658)
  bugfix: secondaryContent not displaying properly (#33689)
  release: applying package updates - react v8
  fix(react-charting): resolve overlapping bars issue in histogram (#33695)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants